import React, { Component } from 'react'
import { NavBar, Icon, SearchBar } from 'antd-mobile';
import "./searchCenter.scss"
import myaxios from "../../utils/myaxios"
import {withRouter} from "react-router-dom"
 class searchCenter extends Component {
  getProductList = (params) => {
    console.log("获取产品列表")
    myaxios.get("goods/qsearch",{
      params:{
        query:this.state.inputValue
      }
    }).then(res=>{
      console.log(res);
      this.setState({
        productList:res
      })
    }).catch(err=>{
      console.log(err);
    })
  }
  handleClick=(e) => {
    let cid1 = e.target.getAttribute("data-goods_id")
    this.props.history.push("/goodDetail/"+cid1)
  }
  
  // https://www.linweiqin.cn/api/public/v1/goods/qsearch
  state = {
    value: "",
    productList:[
      //     {
      //   goods_id: 57407,
      //   goods_name:
      //     "沿途(YANTU)车载充电器一拖三点烟器汽车用双USB多功能充电器车充 黑色带电压监测",
      // },
      // {
      //   goods_id: 57407,
      //   goods_name:
      //     "沿途(YANTU)车载充电器一拖三点烟器汽车用双USB多功能充电器车充 黑色带电压监测",
      // },
      // {
      //   goods_id: 57407,
      //   goods_name:
      //     "沿途(YANTU)车载充电器一拖三点烟器汽车用双USB多功能充电器车充 黑色带电压监测",
      // },
    ]//产品列表
  }
  render() {
    return (
      <div className="yg-searchCenter">
        <NavBar
          className="yg-searchCenter-nav"
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => window.history.go(-1)}
        >
          搜索中心
      </NavBar>
        {/* 搜索中心的开始 */}
        <SearchBar
          // value={this.state.value}
          className="yg-searchCenter-search"
          placeholder="Search"

          value={this.state.inputValue}
          // onSubmit={value => console.log(value, 'onSubmit')}
          // onClear={value => console.log(value, 'onClear')}
          // onFocus={() => console.log('onFocus')}
          // onBlur={() => console.log('onBlur')}
          onCancel={() => this.getProductList()}
          showCancelButton
          cancelText="搜索"
          //内容改变触发
          onChange={(value) => {
            console.log(value);
            this.setState({
              inputValue: value
            })
          }}
        />
        {/* 搜索中心的结束 */}
        {/* 产品列表开始 */}
        <div className="yg-searchCenter-list" onClick= {this.handleClick}>
          {
            this.state.productList.map(v=>{
              return <div className="searchCenter-list-item" key={v.goods_id} data-goods_id = {v.goods_id}>
                {v.goods_name}
              </div>
            })
          }
        </div>
        {/* 产品列表结束 */}
      </div>
    )
  }
}
export default withRouter(searchCenter)